<template>
  <div class="timetable w100 h100">
    <!-- <div class="time-b w100">
      <div class="time-detail">{{ startTime }} - {{ endTime }}</div>
      <div class="time-controller">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-arrow-left"
            @click="changeCount(1), getWeek(count)"
          ></el-button>
          <el-button round class="date-btn">本周</el-button>
          <el-button
            type="primary"
            icon="el-icon-arrow-right"
            @click="changeCount(-1), getWeek(count)"
          ></el-button>
        </el-button-group>
      </div>
    </div> -->
    <div class="timetable-b w100">
      <table class="timetable-content w100">
        <!-- {{ "第"+selectedWeek+"周" }} -->
        <thead>
          <tr>
            <th class="yuefen"><div><p>7月</p></div></th>
            <th v-for="(item1, index1) in times" :key="index1">
             
           <div class="th-tilte">  
            <p> {{ "周"+ item1 }}</p>
            <p class="title-day">8/20</p>
           </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item2, index2) in maxCourseLength" :key="index2">
            <th>
              <p class="jieshu" style=" font-size: 15px; font-weight: bold;">{{  numberToChinease(item2) }}</p>
              <p class="shijianduan" style=" font-size: 10px; color:#007AFF; margin-top: 5px; font-weight: bold;">{{ time[index2] }}</p>
            </th>
            <template v-for="(item3, index3) in weeks"  :key="index3">

            
              <td
              v-if="shouldShowCell(index3, index2)"
      :rowspan="getCourseSpan(index3, index2)"
      :style="[
        {
          display: '',
        },
      ]"
              >
                <div
                  class="dmsjandjs-b"
                  :style="[
                    {
                      background: showData(index3, index2).index
                        ? getRandomColor()
                        : '#e5edfa',
                    },
                 
                    { color: '#fff' },
                    { borderRadius: '5px' },
                   
                    { height: '100%' },
                  ]"
                >
                  <!-- <p>
                    {{ showData(index3, index2).startTime }}
                    {{ showData(index3, index2).startTime ? "-" : "" }}
                    {{ showData(index3, index2).endTime }}
                  </p> -->
              <div class="wenzi">
                <p>{{ showData(index3, index2).subject }}</p>
                  <!-- <p>{{ showData(index3, index2).major }}</p>
                  <p>{{ showData(index3, index2).class }}</p> -->
                  <p>{{ showData(index3, index2).didian}}</p>
              </div>
                </div>
              </td>
            </template>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>


<script>
// import moment from "moment";
let weekCourse = [
  {
    week: 0,
    courses: [
      {
        index: 1,
        // startTime: "08:00", //开始时间
        // endTime: "09:30", //结束时间
        subject: "高等数学", //学科
        // major: "计算机科学与技术", //专业
        // class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 2,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "高等数学", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
    ],
  },
  {
    week: 1,
    courses: [
      {
        index: 1,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "物理", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 2,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "物理", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 3,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "物理", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 4,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "大学英语", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 5,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "Vue", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 6,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "数据结构与算法", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 7,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "Java", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 8,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "数据结构与算法", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 9,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "React", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 10,
        startTime: "09:30", //开始时间
        endTime: "09:30", //结束时间
        subject: "Php", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
    ],
  },
  {
    week: 2,
    courses: [
      {
        index: 3,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "物理", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 8,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "语文", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
    ]
  },
  {
    week: 3,
    courses: [
      {
        index: 1,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "物理", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 4,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "物理", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 3,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "语文", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
    ],
  },
  {
    week: 4,
    courses: [
      {
        index: 1,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "物理", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 3,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "语文", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
    ],
  },
  {
    week: 5,
    courses: [
      {
        index: 4,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "物理", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      {
        index: 3,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "语文", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
    ],
  },
  {
    week: 6,
    courses: [
      {
        index: 2,
        startTime: "08:00", //开始时间
        endTime: "09:30", //结束时间
        subject: "物理", //学科
        major: "计算机科学与技术", //专业
        class: "1702班", //班级
        didian:"钟海楼03010",
      },
      
    ],
  },
 
]//课程详细信息
let colorList = [
  "#FF8C8C",
  "#61C0BF",
  "#46CDCF",
  "#EA5455",
  "#F07B3F",
  "#FFD460",
  "#08D9D6",
  "#3EC1D3",
  "#FF9A00",
  "#6F77DA",
  "#FC8BB6",
  "#81CDEA",
  "#75E977",
  "#18C997",
  "#FF438A",
  "#FF8400",
  "#018DFF",
  "#18C997",
]
const times= ['一', '二', '三', '四', '五', '六', '日'];
const time = ['8:10-8:55', '9:00-9-45', '10:15-11:00', '11:05-11:50', '14:30-15:15', '15:30-16:05', '16:30-17:15', '17:20-18:05', '19:30-20:15', '20:20-21:05'];
export {
  weekCourse, colorList,time
}
export default {
  props: {
  selectedWeek: {
    type: Number,
    required: true
  }
},
  data() {
    return {
      startTime: "2022.10.17",
      endTime: "2022.10.23",
      colorList: [], //随机颜色
      weekCourse: [], // 课程详细课程、数量
      weeks: [], //头部周期
      maxCourseLength: 0, //最大课节数,
      time:time,//上课时间
      times:times,//星期
      count: 0, //上周、下周、本周选择器flag
    };
  },
  created() {
    this.weekCourse = weekCourse;
    this.colorList = colorList;
    this.sortData();
    this.init();
    // this.getWeek(0);
  },
  methods: {
    getCourseSpan(day, timeIndex) {
    let currentCourse = this.showData(day, timeIndex);
    if (!currentCourse || !currentCourse.subject) return 1;

    let span = 1;
    while (timeIndex + span < this.maxCourseLength) {
      let nextCourse = this.showData(day, timeIndex + span);
      if (nextCourse && currentCourse.subject === nextCourse.subject) {
        span++;
      } else {
        break;
      }
    }
    return span;
  },
  shouldShowCell(day, timeIndex) {
    if (timeIndex === 0) return true;
    let prevCourse = this.showData(day, timeIndex - 1);
    let currentCourse = this.showData(day, timeIndex);
    return !prevCourse || !currentCourse || prevCourse.subject !== currentCourse.subject;
  },
    //改变选择器次数
    changeCount(i) {
      this.count += i;
      return this.count;
    },
    // 排序周期和课数
    sortData() {
      //周期
      this.weekCourse.sort((a, b) => {
        return a.week - b.week;
      });
      this.weekCourse.forEach((item) => {
        for (const key in item) {
          if (key === "courses") {
            item[key].sort((a, b) => {
              return a.index - b.index;
            });
          }
        }
      });
    },
    // 初始化课数(courses)与天数(week)
    init() {
      this.weeks = []; //周集合
      this.maxCourseLength = 0;
      this.weeks = this.weekCourse.map((item, index) => {
        for (const key in item) {
          if (key === "courses") {
            let max = 0; //
            //取出一周中最大的课节数及当天的最大课节数
            for (let j of item[key]) {
              j.index > this.maxCourseLength &&
                (this.maxCourseLength = j.index); //取所有一周里最大课节值
              j.index > max && (max = j.index); //取当天最大课节值
            }
            // console.log("max:", max);
 
            //如果当天的课节总数小于当天的最大课节值
            if (item[key].length < max) {
              //以最大课节值为终点遍历当天课节
              for (let i = 0; i < max; i++) {
                //如果下标课节不存在或着与循环的下标不匹配
                if (!item[key][i] || item[key][i].index != i + 1) {
                  item[key].splice(i, 0, " "); //填充空课节
                }
              }
            }
          }
        }
        return item.week;
      });
    },
 
    /**
     * 处理数据
     * @param { Number } weekIndex 周几对应的下标
     * @param { Number }  courseNum  第几节课对应的下标
     * @returns { String }   返回对应字符
     */
    showData(weekIndex, courseNum) {
      if (
        this.weekCourse[weekIndex] &&
        this.weekCourse[weekIndex].courses[courseNum] &&
        this.weekCourse[weekIndex].courses[courseNum].index === courseNum + 1
      ) {
        // this.getRandomColor();
        return this.weekCourse[weekIndex].courses[courseNum];
      }
      return false;
    },
 
    /**
     * 数字转中文
     * @param { Number } n 需转换的数字
     * @param { Boolean }  identifier  标识符
     * @returns { String }  identifier  转换后的中文
     */
    numberToChinease(n, identifier) {
      const chnArr = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
      ];
      return identifier === "week" && (n === 0 || n === 7) ? "日" : chnArr[n];
    },
 
    //随机获取颜色
    getRandomColor() {
      let colorList = this.colorList;
      let colorRandom = Math.floor(Math.random() * colorList.length + 1) - 1;
      let color;
      for (let i = 0; colorList.length > i; i++) {
        if (i == colorRandom) {
          color = colorList[i];
        }
      }
      return color;
    },
  },
};
</script>
   
  <style scoped lang="scss">
  .timetable {
    background-color: #fff;
    padding: 0px 49px 18px 42px;
    border-radius: 8.97px;
background: #FFFFFF;
box-shadow: -3.59px 3.59px 3.59px 0px #0000003F;
    .w100 {
      width: 100% !important;
    }
    .h100 {
      height: 100% !important;
    }
    .time-b {
      height: 46px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .time-detail {
        color: #333333;
        font-weight: 700;
        font-size: 20px;
        font-family: "Microsoft YaHei";
      }
    }
    .timetable-b {
      height: 680px; // 设置固定高度为691px
      background-color: #fff;
      
      .timetable-content {  
        height: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        text-align: center;
        color: #333333;
        font-weight: 400;
        font-size: 9px;
      
        thead {
          height: 40px; // 假设表头高度不变
         .yuefen{
         div{
          color: #0D96FF;
font-family: Inter;
font-weight: bold;
font-size: 23.6px;
text-align: center;
display: table-cell; /* 使div像表格单元格一样对齐 */
vertical-align: middle; /* 垂直居中 */
 height: 40px; /* 确保高度与表头一致 */
         }
         }
          th { 
            display: table-cell; /* 使div像表格单元格一样对齐 */
vertical-align: middle; /* 垂直居中 */
 height: 40px; /* 确保高度与表头一致 */
 
         font-weight: bold;
          .th-tilte{
            display: flex;
            justify-content: center;
            flex-direction: column;
            height: 40px!important;
            align-items: center;
            font-family: Inter;
font-size: 14.75px;
line-height: 1.2;
text-align: center;
            p{
              font-weight: 540;
              color: #10004A;

            }
            .title-day{
              font-size: 10px;
              margin-top: 1px;
             
              letter-spacing: 1px;
            }
          }
          
           // border: 2px solid rgba(27, 100, 240, 0.1);
          }
        }
        tbody {
          height: calc(100% - 40px); // 减去表头高度
         
          td {
            padding: 2px;
            background-color: #e5edfa;
            border: 2px solid #fff;
            border-radius: 5px!important;
            .dmsjandjs-b {
              display: flex;
              flex-direction: column;    
              
              .wenzi{               
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 20px;
                p{
                  margin: 0;
                  line-height: 10px;
                }
              }
             .shijianduan{
              margin-top: 2px;
              color: #007AFF;
font-family: Inter;
font-weight: bold;
font-size: 10.82px;
line-height: 1.2;
text-align: center;
             }
            }
          }
        }
      }
    }
  }
  ::v-deep {
    .time-controller {
      .el-button-group {
        .el-button {
          height: 46px;
          background: #ffffff;
          font-size: 18px;
          font-weight: 600;
          border: 1px solid rgba(27, 100, 240, 0.1);
          border-radius: 55px;
          color: #1b64f0;
        }
        :nth-child(2) {
          margin: 0px 12px;
        }
      }
    }
  }
  
  </style>